<!DOCTYPE html>
 <ui:composition template="/masterWeb.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:define name="content"> 
	<div align="center">
<!--       <p:growl id="growl" showDetail="true" life="3000" /> -->
		<p:wizard style="width:70%" nextLabel="Siguiente" backLabel="Atrás">
			<p:tab id="usuario" title="Usuario">
				<p:panel header="Datos de Acceso">
					<p:messages />
					<h:panelGrid columns="2" cellpadding="3"
						columnClasses="label, value">
						<h:outputText value="Usuario: *" />
						<p:inputText value="#{interesadoBean.usuario.nombreUsuario}" required="false"/>

						<h:outputLabel for="pwd1" value="Contraseña: *" />
						<p:password id="pwd1" match="pwd2" label="Password 1"
							required="false" feedback="true"
							promptLabel="Ingrese una contraseña" weakLabel="Débil"
							goodLabel="Buena" strongLabel="Fuerte" />

						<h:outputLabel for="pwd2" value="Confirmar Contraseña: *" />
						<p:password id="pwd2" label="Password 2" required="false"  value="#{interesadoBean.usuario.contrasenia}"/>

					</h:panelGrid>
				</p:panel>
			</p:tab>

			<p:tab id="interesado" title="Interesado">
				<p:panel header="Datos del Interesado">
					<p:messages />
					<h:panelGrid columns="2" cellpadding="3">
						<h:outputLabel value="Tipo de Documento:" />
						<p:selectOneMenu id="comboTipoDoc"
							converter="tipoDocumentoConverter"
							value="#{interesadoBean.tipoDocumentoSelected}" effect="fade" var="c"
							filter="true" filterMatchMode="startsWith">

							<f:selectItems var="car" value="#{interesadoBean.listTipoDocumentos}"
								itemLabel="#{car.nombreTipoDoc}" itemValue="#{car}" />
							<p:column>
								<h:outputText value="#{c.nombreTipoDoc}" />
							</p:column>
						</p:selectOneMenu>
						<h:outputLabel for="numDoc" value="Número de Documento:" />
						<p:inputText required="false" value="#{interesadoBean.persona.nroDocumento}"/>

						<h:outputLabel for="apellido" value="Apellido:" />
						<p:inputText required="false" value="#{interesadoBean.persona.apellido}"/>
						

						<h:outputLabel for="nombre" value="Nombre:" />
						<p:inputText required="false" value="#{interesadoBean.persona.nombre}"/>
												
						<h:outputLabel for="email" value="E-mail:" />
						<p:inputText id="email" value="#{interesadoBean.persona.email}" size="20">
	</p:inputText>
	</h:panelGrid>
				</p:panel>
			</p:tab>
					<p:tab id="datos" title="Domicilio">
				<p:panel header="Domicilio">
					<h:panelGrid columns="1" cellpadding="3">
					</h:panelGrid>
					
					<h:panelGrid columns="2" cellpadding="3"
						columnClasses="align_top, align_top">
						<p:fieldset legend="Domicilio" toggleable="true" toggleSpeed="500"
							collapsed="false" style="width: auto;">
							<h:panelGrid columns="2" cellpadding="3">
								<h:outputLabel value="País:" />
								<p:selectOneMenu id="advanced" converter="paisConverter"
									value="#{interesadoBean.selectedPais}" effect="fade" var="p"
									filter="true" filterMatchMode="startsWith" style="">
									<f:selectItems var="pais" value="#{interesadoBean.listPaises}"
										itemLabel="#{pais.nombrePais}" itemValue="#{pais}" />
									<p:column>
										<h:outputText value="#{p.nombrePais}" />
									</p:column>
                                    <p:ajax  event="change" update="selectProv" listener="#{interesadoBean.cambiarComboProvincia}" />								
								</p:selectOneMenu>

								<h:outputLabel value="Provincia:" />
								<p:selectOneMenu id="selectProv" converter="provinciaConverter"
									value="#{interesadoBean.provinciaSelected}" effect="fade" var="pr"
									filter="true" filterMatchMode="startsWith"
									panelStyle="width:180px" style="width:160px">

									<f:selectItems var="prov" value="#{interesadoBean.listProvincia}"
										itemLabel="#{prov.nombreProvincia}" itemValue="#{prov}" />
									<p:column>
										<h:outputText value="#{pr.nombreProvincia}" />
									</p:column>
									<p:ajax  event="change" update="selectLoc" listener="#{interesadoBean.cambiarComboLocalidad}" />
								</p:selectOneMenu>

								<h:outputLabel value="Localidad:" />
								<p:selectOneMenu id="selectLoc" converter="localidadConverter"
									value="#{interesadoBean.localidadSelected}" effect="fade" var="lo"
									filter="true" filterMatchMode="startsWith"
									panelStyle="width:180px" style="width:160px">

									<f:selectItems var="loc" value="#{interesadoBean.listLocalidad}"
										itemLabel="#{loc.nombreLocalidad}" itemValue="#{loc}" />
									<p:column>
										<h:outputText value="#{lo.nombreLocalidad}" />
									</p:column>
                                    <p:ajax  event="change" update="selectBarrio" listener="#{interesadoBean.cambiarComboBarrio}" />									
								</p:selectOneMenu>

								<h:outputLabel value="Barrio:" />
								<p:selectOneMenu id="selectBarrio" converter="barrioConverter"
									value="#{interesadoBean.barrioSelected}" effect="fade" var="ba"
									filter="true" filterMatchMode="startsWith"
									panelStyle="width:180px" style="width:160px">

									<f:selectItems var="bar" value="#{interesadoBean.listBarrio}"
										itemLabel="#{bar.nombreBarrio}" itemValue="#{bar}" />
									<p:column>
										<h:outputText value="#{ba.nombreBarrio}" />
									</p:column>
								</p:selectOneMenu>
								<h:outputLabel for="calle" value="Calle:" />
								<p:inputText required="false" value="#{interesadoBean.domicilio.calle}"/>
								<h:outputLabel for="numero" value="Número:" />
								<p:inputText required="false" value="#{interesadoBean.domicilio.numero}"/>
								<h:outputLabel for="piso" value="Piso:" />
								<p:inputText required="false" value="#{interesadoBean.domicilio.piso}"/>

							</h:panelGrid>
						</p:fieldset>


						<p:fieldset id="telefono" legend="Teléfono" toggleable="true"
							toggleSpeed="500" collapsed="false" style="width: 40%;">

							<h:panelGrid columns="2" cellpadding="3">
								<h:outputLabel value="Tipo de teléfono:" />

								<p:selectOneMenu id="comboTipoTel"
									converter="tipotelefonoConverter"
									value="#{interesadoBean.tipoTelefonoSelected}" effect="fade"
									var="tt">

									<f:selectItems var="tipotel"
										value="#{interesadoBean.listTipoTelefono}"
										itemLabel="#{tipotel.nombre}" itemValue="#{tipotel}" />
									<p:column>
										<h:outputText value="#{tt.nombre}" />
									</p:column>
								</p:selectOneMenu>

								<h:outputLabel value="Código de área:" />
								<p:inputText value="#{interesadoBean.telefonoPersona.codigoArea}" />

								<h:outputLabel value="Número de Teléfono:" />
								<p:inputText value="#{interesadoBean.telefonoPersona.numeroTelefono}" />
							</h:panelGrid>

							<br />
							<p:commandButton value="Agregar" id="btnAgregarTelefono"
								icon="ui-icon-disk" process="@this,telefono"
								update="tablaTelefonos"
								action="#{interesadoBean.agregarTelefonoSeleccionado}" />
							<br />

							<p:separator id="separatorTel1" />

							<p:dataTable id="tablaTelefonos" var="tel"
								value="#{interesadoBean.listTelefonoPersona}" selection=""
								rowKey="#{tel.idTelefono}" emptyMessage="Tabla vacía.">

								<p:column headerText="Tipo teléfono">
									<p:cellEditor>
										<f:facet name="output">
											<h:outputText value="#{tel.tipotelefono.nombre}" />
										</f:facet>
										<f:facet name="input">
											<p:inputText id="tipotelInput"
												value="#{tel.tipotelefono.nombre}" style="width:100%" />
										</f:facet>
									</p:cellEditor>
								</p:column>
								<p:column headerText="Código de área">
									<p:cellEditor>
										<f:facet name="output">
											<h:outputText value="#{tel.codigoArea}" />
										</f:facet>
										<f:facet name="input">
											<p:inputText id="codareaInput" value="#{tel.codigoArea}"
												style="width:100%" />
										</f:facet>
									</p:cellEditor>
								</p:column>
								<p:column headerText="Número Teléfono">
									<p:cellEditor>
										<f:facet name="output">
											<h:outputText value="#{tel.numeroTelefono}" />
										</f:facet>
										<f:facet name="input">
											<p:inputText id="numtelInput" value="#{tel.numeroTelefono}"
												style="width:100%" />
										</f:facet>
									</p:cellEditor>
								</p:column>

								<p:column headerText="Eliminar"
									style="width:32px;text-align: center">
								
									<p:commandButton process="@this"
										update="tablaTelefonos" icon="ui-icon-close"
										title="View" action="#{propietarioBean.eliminarTelefono}">
										
										<f:setPropertyActionListener value="#{tel}"
											target="#{interesadoBean.telefonoPersonaSelected}" />
							
									</p:commandButton>
								
								</p:column>

							</p:dataTable>

						</p:fieldset>
					</h:panelGrid>

				</p:panel>
			</p:tab>

			<p:tab id="confirm" title="Confirmación">
				<p:panel header="Confirmación">
					<h:outputText value="Datos de Usuario" styleClass="letra"/>
					<p:separator />
					<h:panelGrid columns="2" cellpadding="3">
						<h:outputText value="Usuario:" />
						<h:outputText value="#{interesadoBean.usuario.nombreUsuario}" />
					</h:panelGrid>
					<br />
					<h:outputLabel value="Datos del Interesado" styleClass="letra" />
					<p:separator />
					<h:panelGrid columns="2" cellpadding="3">
						<h:outputLabel value="Tipo de Documento:" />
						<h:outputLabel value="#{interesadoBean.tipoDocumentoSelected.nombreTipoDoc}"/>

						<h:outputLabel value="Número de Documento:" />
						<h:outputLabel value="#{interesadoBean.persona.nroDocumento}" />

						<h:outputLabel value="Apellido:" />
						<h:outputLabel value="#{interesadoBean.persona.apellido}" />

						<h:outputLabel value="Nombre:" />
						<h:outputLabel value="#{interesadoBean.persona.nombre}" />
				
						<h:outputLabel value="Email:" />
						<h:outputLabel value="#{interesadoBean.persona.email}" />
				
					</h:panelGrid>
					<br />
					<h:outputLabel value="Datos" styleClass="letra"/>
					<p:separator />
					<h:panelGrid columns="1" cellpadding="2">
						
						<h:outputLabel value="Dirección:" />
						<h:outputLabel value="#{interesadoBean.domicilio.calle}  #{interesadoBean.domicilio.numero}, #{interesadoBean.localidadSelected.nombreLocalidad}, #{interesadoBean.provinciaSelected.nombreProvincia}, #{interesadoBean.selectedPais.nombrePais}" />						

					    <p:dataList value="#{interesadoBean.listTelefonoPersona}" var="tel" type="ordered">
					        <f:facet name="header">
					            Teléfonos
					        </f:facet>
					        #{tel.tipotelefono.nombre}, #{tel.codigoArea}-#{tel.numeroTelefono}
					    </p:dataList>
					</h:panelGrid>
					<p:separator />
					<br/>
					<p:commandButton value="Guardar" action="#{interesadoBean.guardarInteresado}" styleClass="ui-priority-primary"/>
				</p:panel>
			</p:tab>
		</p:wizard>
</div>

 </ui:define>
</ui:composition> 
